<template>
  <div class="profile-container">
    <!-- 左侧导航 -->
    <div class="profile-sidebar">
      <div class="sidebar-title">个人资料</div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        mode="inline"
        :style="{ border: 'none' }"
        @select="handleMenuSelect"
      >
        <a-menu-item key="account">
          <template #icon><user-outlined /></template>
          账号设置
        </a-menu-item>
        <a-menu-item key="collection">
          <template #icon><star-outlined /></template>
          我的收藏
        </a-menu-item>
        <a-menu-item key="content">
          <template #icon><file-outlined /></template>
          内容管理
        </a-menu-item>
      </a-menu>
    </div>

    <!-- 右侧内容区 -->
    <div class="profile-content">
      <!-- 用户信息头部 -->
      <div class="user-header">
        <div class="user-info">
          <div class="avatar-section">
            <a-upload
              name="avatar"
              :show-upload-list="false"
              :custom-request="handleAvatarUpload"
              accept="image/*"
            >
              <div class="avatar-wrapper">
                <template v-if="formState.picture">
                  <img :src="formState.picture + '?t=' + Date.now()" alt="avatar" class="avatar-image" />
                  <div class="avatar-overlay">
                    <camera-outlined />
                    <span>更换头像</span>
                  </div>
                </template>
                <template v-else>
                  <div class="avatar-placeholder">
                    <loading-outlined v-if="uploading" />
                    <user-outlined v-else />
                    <div class="upload-text">上传头像</div>
                  </div>
                </template>
              </div>
            </a-upload>
            <div class="avatar-tip">
              <div>支持 jpg、png 格式</div>
              <div>文件小于 5MB</div>
            </div>
          </div>
          <div class="user-meta">
            <h2>{{ formState.username }}</h2>
            <div class="user-stats">
              <div class="stat-item">
                <div class="stat-value">论坛达人</div>
                <div class="stat-label">用户身份</div>
              </div>
              <div class="stat-item">
                <div class="stat-value">{{ formState.title ? formState.title.length : 0 }}</div>
                <div class="stat-label">兴趣标签</div>
              </div>
            </div>
            <div class="user-tags">
              <a-tag v-for="tag in formState.title" :key="tag" class="user-tag">
                <template #icon><star-outlined /></template>
                {{ tag }}
              </a-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 重新设计的基本信息区域 -->
      <div class="info-container">
        <!-- 基础信息组 -->
        <div class="info-section">
          <div class="section-header">
            <h3>
              <user-outlined />
              基础信息
            </h3>
          </div>
          <div class="section-content">
            <div class="info-field">
              <div class="field-label">
                <user-outlined />
                <span>用户昵称</span>
              </div>
              <div class="field-content" v-if="!editingField.username" @click="startEdit('username')">
                <span class="field-value">{{ formState.username }}</span>
                <edit-outlined class="edit-icon" />
              </div>
              <div v-else class="field-edit">
                <a-input
                  v-model:value="formState.username"
                  placeholder="请输入用户名"
                  @change="handleUsernameChange"
                  @pressEnter="finishEdit('username')"
                />
                <div class="edit-actions">
                  <a-button type="primary" size="small" @click="finishEdit('username')">确定</a-button>
                  <a-button size="small" @click="cancelEdit('username')">取消</a-button>
                </div>
                <!-- 用户名验证提示 -->
                <div class="validation-tip" v-if="usernameChecking">
                  <loading-outlined spin /> 正在验证...
                </div>
                <div class="validation-tip success" v-else-if="usernameAvailable === true">
                  <check-circle-outlined /> 用户名可用
                </div>
                <div class="validation-tip error" v-else-if="usernameAvailable === false">
                  <close-circle-outlined /> 用户名已被使用
                </div>
              </div>
            </div>

            <div class="info-field">
              <div class="field-label">
                <team-outlined />
                <span>性别</span>
              </div>
              <div class="field-content" v-if="!editingField.gender" @click="startEdit('gender')">
                <span class="field-value">{{ formState.gender === '0' ? '男' : '女' }}</span>
                <edit-outlined class="edit-icon" />
              </div>
              <div v-else class="field-edit">
                <a-radio-group v-model:value="formState.gender">
                  <a-radio value="0">男</a-radio>
                  <a-radio value="1">女</a-radio>
                </a-radio-group>
                <div class="edit-actions">
                  <a-button type="primary" size="small" @click="finishEdit('gender')">确定</a-button>
                  <a-button size="small" @click="cancelEdit('gender')">取消</a-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 个人资料组 -->
        <div class="info-section">
          <div class="section-header">
            <h3>
              <profile-outlined />
              个人资料
            </h3>
          </div>
          <div class="section-content">
            <div class="info-field">
              <div class="field-label">
                <calendar-outlined />
                <span>出生日期</span>
              </div>
              <div class="field-content" v-if="!editingField.birthday" @click="startEdit('birthday')">
                <span class="field-value">{{ formState.birthday ? dayjs(formState.birthday).format('YYYY-MM-DD') : '未设置' }}</span>
                <edit-outlined class="edit-icon" />
              </div>
              <div v-else class="field-edit">
                <a-date-picker
                  v-model:value="formState.birthday"
                  :format="dateFormat"
                  :disabled-date="disabledDate"
                  placeholder="请选择生日"
                />
                <div class="edit-actions">
                  <a-button type="primary" size="small" @click="finishEdit('birthday')">确定</a-button>
                  <a-button size="small" @click="cancelEdit('birthday')">取消</a-button>
                </div>
              </div>
            </div>

            <div class="info-field full-width">
              <div class="field-label">
                <read-outlined />
                <span>个人简介</span>
              </div>
              <div class="field-content" v-if="!editingField.context" @click="startEdit('context')">
                <div class="bio-content">
                  <p v-if="formState.context" class="field-value">{{ formState.context }}</p>
                  <p v-else class="field-placeholder">添加个人简介，让大家更好地认识你...</p>
                </div>
                <edit-outlined class="edit-icon" />
              </div>
              <div v-else class="field-edit">
                <a-textarea
                  v-model:value="formState.context"
                  :rows="4"
                  :maxlength="250"
                  show-count
                  placeholder="介绍一下你自己吧..."
                  class="bio-textarea"
                />
                <div class="edit-actions">
                  <a-button type="primary" size="small" @click="finishEdit('context')">确定</a-button>
                  <a-button size="small" @click="cancelEdit('context')">取消</a-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 兴趣标签组 -->
        <div class="info-section">
          <div class="section-header">
            <h3>
              <tags-outlined />
              兴趣标签
            </h3>
          </div>
          <div class="section-content">
            <div class="info-field full-width">
              <div class="field-content" v-if="!editingField.title" @click="startEdit('title')">
                <div class="tags-content">
                  <template v-if="formState.title && formState.title.length">
                    <a-tag v-for="tag in formState.title" :key="tag" class="interest-tag">
                      {{ tag }}
                    </a-tag>
                  </template>
                  <p v-else class="field-placeholder">添加一些标签，展示你的兴趣爱好...</p>
                </div>
                <edit-outlined class="edit-icon" />
              </div>
              <div v-else class="field-edit">
                <a-select
                  v-model:value="formState.title"
                  mode="tags"
                  style="width: 100%"
                  placeholder="请输入标签，按回车确认"
                  :token-separators="[',']"
                >
                  <a-select-option v-for="tag in defaultTags" :key="tag" :value="tag">
                    {{ tag }}
                  </a-select-option>
                </a-select>
                <div class="edit-actions">
                  <a-button type="primary" size="small" @click="finishEdit('title')">确定</a-button>
                  <a-button size="small" @click="cancelEdit('title')">取消</a-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import type { BaseUserInfo } from '@/stores/user'
import { message } from 'ant-design-vue'
import { debounce } from 'lodash-es'
import dayjs, { Dayjs } from 'dayjs'
import {
  UserOutlined,
  StarOutlined,
  FileOutlined,
  CameraOutlined,
  LoadingOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
  EditOutlined,
  InfoCircleOutlined,
  TeamOutlined,
  ProfileOutlined,
  CalendarOutlined,
  ReadOutlined,
  TagsOutlined
} from '@ant-design/icons-vue'
import { uploadAvatar, checkUsername } from '@/api/user'
import type { UploadProps } from 'ant-design-vue'
import axios from 'axios'

interface FormState extends Omit<BaseUserInfo, 'avatar' | 'state'> {
  birthday: Dayjs | null
}

// 表单数据
const formState = reactive<FormState>({
  username: '',
  gender: '0',
  birthday: null,
  phone: '',
  email: '',
  picture: '',
  context: '',
  title: []
})

const userStore = useUserStore()
const formRef = ref()
const uploading = ref(false)
const router = useRouter()
const selectedKeys = ref<string[]>(['account'])

// 用户名验证相关
const usernameChecking = ref(false)
const usernameAvailable = ref<boolean | null>(null)

// 编辑状态管理
interface EditingField {
  username: boolean
  usernameHover: boolean
  gender: boolean
  genderHover: boolean
  context: boolean
  contextHover: boolean
  birthday: boolean
  birthdayHover: boolean
  title: boolean
  titleHover: boolean
}

const editingField = reactive<EditingField>({
  username: false,
  usernameHover: false,
  gender: false,
  genderHover: false,
  context: false,
  contextHover: false,
  birthday: false,
  birthdayHover: false,
  title: false,
  titleHover: false
})

// 临时存储编辑前的值
interface TempFormState {
  username?: string;
  gender?: string;
  birthday?: Dayjs | null;
  phone?: string;
  email?: string;
  picture?: string;
  context?: string;
  title?: string[];
}

const tempValues = reactive<TempFormState>({})

// 处理头像上传
const handleAvatarUpload: UploadProps['customRequest'] = async (options) => {
  const { file, onSuccess, onError } = options
  
  if (!file || !(file instanceof File)) {
    message.error('无效的文件')
    onError?.(new Error('无效的文件'))
    return
  }

  uploading.value = true
  
  try {
    // 检查文件类型
    if (!file.type.startsWith('image/')) {
      message.error('只能上传图片文件！')
      onError?.(new Error('只能上传图片文件'))
      return
    }

    // 检查文件大小（5MB）
    if (file.size > 5 * 1024 * 1024) {
      message.error('图片大小不能超过5MB！')
      onError?.(new Error('图片大小不能超过5MB'))
      return
    }

    // 创建 FormData 对象
    const formData = new FormData()
    formData.append('file', file)

    // 确保有用户ID
    if (!userStore.userInfo?.id) {
      message.error('用户未登录')
      onError?.(new Error('用户未登录'))
      return
    }

    // 上传文件，直接使用原始响应，不通过拦截器自动解包
    console.log('开始上传头像...')
    const response = await axios.post(
      `${import.meta.env.VITE_API_BASE_URL}/api/user/upload/${userStore.userInfo.id}`, 
      formData,
      {
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': `Bearer ${localStorage.getItem('accessToken')}`
        }
      }
    )
    console.log('上传头像响应:', response)
    
    // 检查响应格式
    const res = response.data
    if (res.code === '200') {
      // 更新表单状态和store
      formState.picture = res.data
      await userStore.updateUser({ picture: res.data })
      message.success('头像上传成功')
      onSuccess?.(res.data)
    } else {
      console.error('上传头像失败:', res)
      message.error(res.message || '上传失败')
      onError?.(new Error(res.message || '上传失败'))
    }
  } catch (error) {
    console.error('上传头像失败:', error)
    if (axios.isAxiosError(error) && error.response) {
      console.error('错误响应:', error.response.data)
      const errorData = error.response.data
      message.error(errorData.message || '上传失败')
    } else {
      message.error('上传失败：网络错误')
    }
    onError?.(error instanceof Error ? error : new Error('上传失败'))
  } finally {
    uploading.value = false
  }
}

// 用户名变化处理函数
const handleUsernameChange = debounce(async (e: Event) => {
  const target = e.target as HTMLInputElement
  const newUsername = target.value.trim()
  
  // 如果用户名没有变化或为空，不进行查询
  if (!newUsername || (userStore.userInfo && newUsername === userStore.userInfo.username)) {
    usernameAvailable.value = null
    return
  }

  // 检查用户名格式
  if (!/^[a-zA-Z0-9_\u4e00-\u9fa5]{2,20}$/.test(newUsername)) {
    usernameAvailable.value = false
    return
  }

  try {
    usernameChecking.value = true
    const res = await checkUsername(newUsername)
    usernameAvailable.value = res.data
  } catch (error) {
    console.error('检查用户名失败:', error)
    usernameAvailable.value = false
  } finally {
    usernameChecking.value = false
  }
}, 500)

// 开始编辑
const startEdit = (field: keyof EditingField) => {
  if (field in formState) {
    // 使用类型断言来避免类型错误
    tempValues[field as keyof TempFormState] = formState[field as keyof FormState] as any
  }
  editingField[field] = false
  setTimeout(() => {
    editingField[field] = true
  }, 0)
}

// 完成编辑
const finishEdit = async (field: keyof EditingField) => {
  editingField[field] = false
  
  // 如果字段有变化，更新用户信息
  if (field in formState && tempValues[field as keyof TempFormState] !== formState[field as keyof FormState]) {
    try {
      // 特殊处理 birthday 字段，确保它是字符串格式
      let updateData: any = {}
      
      if (field === 'birthday' && formState.birthday) {
        // 将 Dayjs 对象转换为字符串
        updateData[field] = formState.birthday.format('YYYY-MM-DD')
      } else if (field === 'title' && Array.isArray(formState.title)) {
        // 将标签数组转换为 JSON 字符串
        updateData[field] = JSON.stringify(formState.title)
      } else {
        updateData[field] = formState[field as keyof FormState]
      }
      
      await userStore.updateUser(updateData)
      message.success('更新成功')
    } catch (error) {
      message.error('更新失败')
      // 恢复原值
      if (field in tempValues) {
        formState[field as keyof FormState] = tempValues[field as keyof TempFormState] as any
      }
    }
  }
}

// 取消编辑
const cancelEdit = (field: keyof EditingField) => {
  editingField[field] = false
  if (field in tempValues) {
    formState[field as keyof FormState] = tempValues[field as keyof TempFormState] as any
  }
}

// 日期格式
const dateFormat = 'YYYY-MM-DD'

// 禁用日期
const disabledDate = (current: Dayjs) => {
  return current && current > dayjs().endOf('day')
}

// 推荐标签
const defaultTags = [
  '前端开发',
  '后端开发',
  'UI设计',
  '产品经理',
  '运维',
  '测试',
  '全栈开发',
  '移动开发',
  '游戏开发',
  '数据分析',
  '人工智能',
  '区块链',
  '云计算',
  '网络安全'
]

// 处理菜单选择
const handleMenuSelect = ({ key }: { key: string }) => {
  switch (key) {
    case 'collection':
      router.push('/favorites')
      break
    case 'content':
      router.push('/my-posts')
      break
    default:
      selectedKeys.value = ['account']
  }
}

// 初始化用户数据
onMounted(async () => {
  console.log('[个人资料页] 页面加载开始')
  
  // 根据当前路由设置选中的菜单项
  const path = router.currentRoute.value.path
  if (path === '/favorites') {
    selectedKeys.value = ['collection']
  } else if (path === '/my-posts') {
    selectedKeys.value = ['content']
  } else {
    selectedKeys.value = ['account']
  }

  // 检查是否有token
  const token = localStorage.getItem('accessToken')
  if (!token) {
    console.warn('[个人资料页] 未找到访问令牌，需要登录')
    message.warning('请先登录')
    router.push('/login?redirect=/profile')
    return
  }
  
  // 检查登录状态，如果未登录则尝试恢复
  if (!userStore.isLoggedIn) {
    console.log('[个人资料页] 未检测到登录状态，尝试从本地存储恢复')
    const restored = userStore.checkLoginStatus()
    console.log('[个人资料页] 登录状态恢复结果:', restored)
    
    if (!restored) {
      console.warn('[个人资料页] 无法恢复登录状态')
      message.warning('登录状态已过期，请重新登录')
      router.push('/login?redirect=/profile')
      return
    }
  }
  
  // 再次检查是否有用户信息
  if (!userStore.userInfo || !userStore.userInfo.id) {
    console.error('[个人资料页] 用户信息无效或不完整')
    message.error('无法加载用户信息，请重新登录')
    userStore.logout() // 清除可能无效的登录状态
    router.push('/login?redirect=/profile')
    return
  }
  
  // 用户ID类型检查
  const userId = typeof userStore.userInfo.id === 'string' 
    ? parseInt(userStore.userInfo.id) 
    : userStore.userInfo.id
  
  if (isNaN(userId) || userId <= 0) {
    console.error('[个人资料页] 无效的用户ID:', userStore.userInfo.id)
    message.error('用户信息无效，请重新登录')
    userStore.logout()
    router.push('/login?redirect=/profile')
    return
  }

  try {
    // 显示加载状态
    const loadingMessage = message.loading({
      content: '正在加载用户数据...',
      duration: 0
    })
    
    console.log('[个人资料页] 开始获取用户详细信息，用户ID:', userId)
    
    // 获取最新用户数据，添加重试机制
    let success = false
    let retryCount = 0
    const maxRetries = 2
    
    while (!success && retryCount < maxRetries) {
      try {
        success = await userStore.getUserDetail()
        if (success) {
          console.log('[个人资料页] 成功获取用户详情')
          break
        } else {
          retryCount++
          console.warn(`[个人资料页] 获取用户详情失败，尝试重试 (${retryCount}/${maxRetries})`)
          // 等待后重试
          await new Promise(resolve => setTimeout(resolve, 1000))
        }
      } catch (error) {
        retryCount++
        console.error(`[个人资料页] 获取用户详情出错，尝试重试 (${retryCount}/${maxRetries}):`, error)
        if (retryCount < maxRetries) {
          await new Promise(resolve => setTimeout(resolve, 1000))
        }
      }
    }
    
    // 关闭加载提示
    loadingMessage()
    
    if (!success) {
      console.warn('[个人资料页] 多次尝试获取用户详情失败，使用缓存数据')
      message.warning('获取最新数据失败，显示的可能不是最新信息')
    }
  } catch (error) {
    console.error('[个人资料页] 获取用户数据异常:', error)
    message.error('加载用户数据失败')
  }

  // 填充表单数据
  updateFormData()
})

// 更新表单数据的辅助函数
const updateFormData = () => {
  const currentUser = userStore.userInfo
  if (!currentUser) {
    console.error('[个人资料页] 没有用户数据可用于填充表单')
    return
  }

  console.log('[个人资料页] 准备填充表单数据:', {
    id: currentUser.id,
    username: currentUser.username || '未设置',
    gender: currentUser.gender || '0'
  })
  
  // 处理title字段 - 确保它是数组
  let userTags: string[] = []
  if (currentUser.title) {
    if (typeof currentUser.title === 'string') {
      try {
        // 尝试解析JSON
        if (currentUser.title.startsWith('[') && currentUser.title.endsWith(']')) {
          const parsed = JSON.parse(currentUser.title)
          userTags = Array.isArray(parsed) ? parsed : []
        } else {
          // 可能是逗号分隔的字符串
          userTags = currentUser.title.split(',').filter(tag => tag.trim())
        }
      } catch (e) {
        console.warn('[个人资料页] 解析标签失败:', e)
        userTags = []
      }
    } else if (Array.isArray(currentUser.title)) {
      userTags = currentUser.title
    }
  }

  console.log('[个人资料页] 填充表单:', {
    username: currentUser.username || '未设置',
    gender: currentUser.gender || '0',
    tags: userTags.length ? `${userTags.length}个标签` : '无标签'
  })
  
  // 更新表单状态
  Object.assign(formState, {
    username: currentUser.username || '',
    gender: currentUser.gender || '0',
    birthday: currentUser.birthday ? dayjs(currentUser.birthday) : null,
    phone: currentUser.phone || '',
    email: currentUser.email || '',
    picture: currentUser.picture || '',
    context: currentUser.context || '',
    title: userTags
  })
}
</script>

<style lang="scss" scoped>
.profile-container {
  display: flex;
  min-height: calc(100vh - 64px);
  background: #f5f5f5;
  padding: 20px;
}

.profile-sidebar {
  width: 240px;
  background: #fff;
  border-radius: 12px;
  margin-right: 20px;
  padding: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .sidebar-title {
    padding: 0 24px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #262626;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      left: 24px;
      bottom: -8px;
      width: 32px;
      height: 3px;
      background: linear-gradient(90deg, #1890ff, #40a9ff);
      border-radius: 2px;
    }
  }

  :deep(.ant-menu-item) {
    margin: 4px 8px;
    padding: 0 16px;
    border-radius: 6px;

    &:hover {
      color: #1890ff;
      background: #e6f7ff;
    }

    &.ant-menu-item-selected {
      color: #1890ff;
      background: linear-gradient(90deg, #e6f7ff, rgba(24, 144, 255, 0.1));
      border-right: none;
      
      &::after {
        display: none;
      }

      .anticon {
        color: #1890ff;
      }
    }
  }
}

.profile-content {
  flex: 1;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .user-header {
    margin-bottom: 32px;
    background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
    border-radius: 8px;
    padding: 24px;
    border: 1px solid #91d5ff;

    .user-info {
      display: flex;
      align-items: flex-start;
      gap: 24px;

      .avatar-section {
        .avatar-wrapper {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          cursor: pointer;
          position: relative;
          border: 3px solid #fff;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(24, 144, 255, 0.2);
            
            .avatar-overlay {
              opacity: 1;
            }
          }

          .avatar-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }

          .avatar-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            opacity: 0;
            transition: opacity 0.3s;

            .anticon {
              font-size: 20px;
              margin-bottom: 4px;
            }

            span {
              font-size: 12px;
            }
          }

          .avatar-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #fafafa;
            color: #999;

            .anticon {
              font-size: 24px;
              margin-bottom: 4px;
            }

            .upload-text {
              font-size: 12px;
            }
          }
        }

        .avatar-tip {
          margin-top: 8px;
          color: #999;
          font-size: 12px;
          text-align: center;
          line-height: 1.5;
        }
      }

      :deep(.ant-upload) {
        width: auto !important;
        height: auto !important;
        background: none !important;
        border: none !important;
        
        &:hover {
          background: none !important;
        }
      }

      .user-meta {
        flex: 1;
        
        h2 {
          margin: 0 0 16px;
          font-size: 28px;
          font-weight: 600;
          background: linear-gradient(45deg, #1890ff, #722ed1);
          -webkit-background-clip: text;
          color: transparent;
        }

        .user-stats {
          display: flex;
          gap: 32px;
          margin-bottom: 20px;
          padding: 16px;
          background: rgba(255, 255, 255, 0.8);
          border-radius: 8px;
          backdrop-filter: blur(8px);

          .stat-item {
            position: relative;
            padding-right: 32px;

            &:not(:last-child)::after {
              content: '';
              position: absolute;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 1px;
              height: 24px;
              background: #e8e8e8;
            }

            .stat-value {
              font-size: 24px;
              font-weight: 600;
              background: linear-gradient(45deg, #1890ff, #40a9ff);
              -webkit-background-clip: text;
              color: transparent;
              line-height: 1;
              margin-bottom: 6px;
            }

            .stat-label {
              font-size: 13px;
              color: #8c8c8c;
            }
          }
        }

        .user-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 12px;

          .user-tag {
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 13px;
            background: #fff;
            color: #1890ff;
            border: 1px solid #91d5ff;
            transition: all 0.3s ease;

            &:hover {
              background: #e6f7ff;
              transform: translateY(-1px);
            }

            .anticon {
              font-size: 12px;
              margin-right: 4px;
              color: #69c0ff;
            }
          }
        }
      }
    }
  }

  .info-container {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .info-section {
      background: #fff;
      border-radius: 16px;
      padding: 32px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      border: 1px solid rgba(0, 0, 0, 0.05);

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      }

      .section-header {
        margin-bottom: 32px;
        
        h3 {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 20px;
          font-weight: 600;
          color: #262626;
          margin: 0;
          padding: 0;
          position: relative;

          .anticon {
            font-size: 20px;
            color: #1890ff;
            background: linear-gradient(135deg, #e6f7ff 0%, #f0f5ff 100%);
            padding: 8px;
            border-radius: 12px;
          }

          &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -12px;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, #1890ff, #40a9ff);
            border-radius: 2px;
          }
        }
      }

      .section-content {
        .info-field {
          margin-bottom: 24px;

          &:last-child {
            margin-bottom: 0;
          }

          .field-label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            color: #8c8c8c;
            font-size: 14px;

            .anticon {
              color: #1890ff;
              font-size: 16px;
            }
          }

          .field-content {
            background: #fff;
            border: 1px solid #f0f0f0;
            border-radius: 12px;
            padding: 16px;
            min-height: 48px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              border-color: #40a9ff;
              background: #fafafa;
              transform: translateY(-1px);

              .edit-icon {
                opacity: 1;
                transform: translateX(0);
              }

              &::before {
                opacity: 1;
                transform: scaleY(1);
              }
            }

            &::before {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 4px;
              height: 100%;
              background: linear-gradient(180deg, #1890ff 0%, #40a9ff 100%);
              border-radius: 4px 0 0 4px;
              opacity: 0;
              transform: scaleY(0.6);
              transition: all 0.3s ease;
            }

            .field-value {
              color: #262626;
              font-size: 15px;
              line-height: 1.6;
              margin-right: 32px;
            }

            .field-placeholder {
              color: #bfbfbf;
              font-style: italic;
              margin: 0;
            }

            .edit-icon {
              position: absolute;
              right: 16px;
              top: 50%;
              transform: translateY(-50%) translateX(10px);
              opacity: 0;
              transition: all 0.3s ease;
              color: #1890ff;
              font-size: 16px;
              padding: 8px;
              border-radius: 8px;
              background: rgba(24, 144, 255, 0.1);

              &:hover {
                background: rgba(24, 144, 255, 0.15);
                transform: translateY(-50%) translateX(0);
              }
            }
          }

          .field-edit {
            margin-top: 12px;

            .ant-input,
            .ant-input-textarea,
            .ant-select,
            .ant-picker,
            .ant-radio-group {
              width: 100%;
              border-radius: 8px;
              border-color: #d9d9d9;
              transition: all 0.3s;

              &:hover,
              &:focus {
                border-color: #40a9ff;
                box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
              }
            }

            .ant-radio-group {
              display: flex;
              gap: 24px;
              padding: 8px 0;
            }

            .validation-tip {
              margin-top: 8px;
              font-size: 14px;
              display: flex;
              align-items: center;
              gap: 8px;

              &.success {
                color: #52c41a;
              }

              &.error {
                color: #ff4d4f;
              }

              .anticon {
                font-size: 16px;
              }
            }

            .edit-actions {
              margin-top: 16px;
              display: flex;
              gap: 12px;
              justify-content: flex-end;

              .ant-btn {
                padding: 4px 16px;
                height: 32px;
                display: flex;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                transition: all 0.3s ease;

                &.ant-btn-primary {
                  background: linear-gradient(45deg, #1890ff, #40a9ff);
                  border: none;
                  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35);

                  &:hover {
                    background: linear-gradient(45deg, #40a9ff, #69c0ff);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.45);
                  }
                }

                &.ant-btn-default {
                  border-color: #d9d9d9;
                  color: #595959;

                  &:hover {
                    color: #40a9ff;
                    border-color: #40a9ff;
                    transform: translateY(-1px);
                  }
                }
              }
            }
          }

          &.full-width {
            .field-content {
              .bio-content {
                white-space: pre-wrap;
                word-break: break-all;
                font-size: 14px;
                line-height: 1.8;
                color: #595959;
                padding-right: 40px;
              }
            }

            .field-edit {
              .bio-textarea {
                min-height: 120px;
                font-size: 14px;
                line-height: 1.8;
                padding: 16px;
                resize: none;
                
                &::placeholder {
                  color: #bfbfbf;
                }
              }
            }
          }
        }

        .tags-content {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          padding: 4px 0;

          .interest-tag {
            padding: 6px 16px;
            border-radius: 20px;
            font-size: 14px;
            background: #f0f7ff;
            color: #1890ff;
            border: 1px solid #91d5ff;
            transition: all 0.3s ease;

            &:hover {
              background: #e6f7ff;
              transform: translateY(-2px);
              box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
            }
          }

          .field-placeholder {
            color: #bfbfbf;
            font-style: italic;
            margin: 8px 0;
          }
        }
      }
    }
  }

  .form-footer {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
  }
}

.info-grid {
  .info-item {
    position: relative;

    .info-content {
      display: flex;
      align-items: center;
      min-height: 32px;
      padding: 4px 8px;
      background: #fafafa;
      border-radius: 4px;
      transition: background-color 0.3s;
      width: fit-content;
      max-width: 100%;

      &:hover {
        background: #f0f0f0;
      }

      .info-text {
        flex: 1;
        color: rgba(0, 0, 0, 0.85);
        min-width: 100px;
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .edit-btn {
        padding: 0 4px;
        height: 24px;
        color: #1890ff;
        opacity: 0;
        transition: opacity 0.3s;
        
        .anticon {
          font-size: 14px;
        }
      }

      &:hover .edit-btn {
        opacity: 1;
      }
    }

    .edit-content {
      .edit-field {
        display: flex;
        align-items: flex-start;
        gap: 8px;

        .edit-actions {
          display: flex;
          gap: 8px;
          margin-left: 8px;
        }
      }

      .username-tip {
        margin-top: 4px;
        margin-left: 0;
      }
    }

    &.full-width {
      .edit-field {
        flex-direction: column;
        gap: 12px;

        .edit-actions {
          margin-left: 0;
        }
      }
    }
  }
}

.bio-display {
  padding: 12px 16px;
  min-height: 80px;
  position: relative;
  transition: all 0.3s;

  .bio-text {
    color: #262626;
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .bio-placeholder {
    color: #bfbfbf;
    font-style: italic;
    margin: 0;
  }

  &.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
  }
}

.bio-textarea {
  width: 100%;
  resize: none;
  font-size: 14px;
  line-height: 1.8;
  padding: 12px;
  border: none;
  outline: none;
  background: #fafafa;
  
  &:hover, &:focus {
    background: #f5f5f5;
  }
  
  &::placeholder {
    color: #bfbfbf;
  }
}

.bio-tips {
  margin-top: 8px;
  
  .tip-count {
    display: flex;
    align-items: center;
    color: #666;
    font-size: 12px;
    
    .anticon {
      margin-right: 6px;
      font-size: 14px;
      color: #1890ff;
    }
  }
}

.edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

.info-content {
  position: relative;
  
  .edit-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    padding: 4px 8px;
    
    &:hover {
      background: rgba(24, 144, 255, 0.1);
    }
  }
  
  &:hover .edit-btn {
    opacity: 1;
  }
}

// 添加响应式样式
@media screen and (max-width: 768px) {
  .info-container {
    .info-section {
      padding: 24px;

      .section-header {
        margin-bottom: 24px;

        h3 {
          font-size: 18px;
        }
      }

      .section-content {
        .info-field {
          .field-content {
            padding: 12px;
          }

          .field-edit {
            .edit-actions {
              flex-direction: column;
              
              .ant-btn {
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>